@extends('agent.mainlayout')
@section('title')
    <div class="title"><span>商品管理></span></div>
    @endsection
    @section('content')
            <!-- start 商品发布第二步-->
    <div class="list7">
        <h4>填写商品信息</h4>
        <div class="main_center">
            <input type="hidden" name="cid_1" id="cid_1">
            <input type="hidden" name="cid_2" id="cid_2">
            <input type="hidden" name="cid_3" id="cid_3">
            <ul class="list_one">
                <li><p>商品名称</p> <input type="text" id="name" name="name"/></li>
                <li><p>商品价格</p> <input type="text" id="price" name="price"/></li>
                <li><p>库存</p> <input type="text" id="num" name="num"/></li>
                <li style="height:auto" id="guige">
                    <p>规格</p>
                    <div class="special">
                        <input style="width: 120px" type="text" class="guiname" placeholder="规格名"/>
                        <input style="width: 120px"  type="text" class="guivalue" placeholder="规格值"/>
                        <span class="add" onclick="addGuige(this)">添加规格</span>
                    </div>
                </li>
            </ul>
            <div class="bottom">
                <p class="p1">商品图片</p>
                <div class="right">
                    <a href="javascript:;">上传图片 <input type="file" id="uploadImage" accept="image/*" num="9" name="myPhoto"
                                                       onchange="upload(this,'imgs','btns','thumb')"></a>
                    <ul class="pics" id="imgs">

                    </ul>
                </div>
                <div class="edit">
                    <!-- 加载编辑器的容器 -->
                    <script id="container" name="content" type="text/plain">
                    这里写你的初始化内容
                    </script>
                </div>
            </div>
        </div>
        <span id="btns"></span>
        <div class="fabu">确认发布</div>
    </div>
    <script src="/utf8-php/ueditor.config.js"></script>
    <script src="/utf8-php/ueditor.all.min.js"></script>

    <!-- end 商品发布第二步-->
    <script>
        $(function(){

            var ue = UE.getEditor('container');

        });



       function addGuige(_this){
           _this.innerHTML = '删除规格';
           _this.setAttribute('onclick',"delGuige(this)");
           var  guigebox = document.getElementById('guige');
           var  special = guigebox.getElementsByClassName('special');
           if(special.length>5){
                  return;
           }
           var temp = '<div class="special"><input style="width: 120px" type="text" class="guiname" placeholder="规格名"/> <input style="width: 120px"  type="text" class="guivalue" placeholder="规格值"/> <span class="add" onclick="addGuige(this)"> 添加规格</span> </div>';
           guigebox.innerHTML += temp;
       }

       function delGuige(_this){
           var  guigebox = document.getElementById('guige');
           var  parentNode = _this.parentNode;
           guigebox.removeChild(parentNode);
       }

       function upload(obj, imgId, btnId, name) {
           var _self = obj;
           var _this = $(obj);
           var fileReader = new FileReader();
           fileReader.onload = function (e) {
               if (fileReader.readyState == FileReader.DONE) {
                   var file = _self.files[0];
                   var size = file.size;
                   var width = file.width;
                   var height = file.height;
                   var param_num = _this.attr('num');//上传图片数量
                   var param_count = _this.attr('count');//已上传图片数量
                   if (param_num == null || param_num == undefined) {
                       _this.attr('num', 1);
                   }
                   if (param_count == null || param_count == undefined) {
                       _this.attr('count', 0);
                   }
                   var num = parseInt(_this.attr('num'));
                   var count = parseInt(_this.attr('count'));
                   if (count < num) {
                       count = count + 1;
                       var upFileId = _this.attr('id');
                       var fileId = imgId + '_' + count;
                       var func = 'delImg("' + upFileId + '","' + fileId + '")';
                       $("#" + imgId).append('<li class="' + fileId + '"><img src="' + this.result + '"/><p class="' + fileId + '" onclick=' + func + '>删除</p></li>');
                       $("#" + btnId).append('<input type="hidden" name="' + name + '[]" class="' + fileId + '"  value="' + this.result + '">');
                       _this.attr('count', count);
                   } else {
                       alert('最多上传' + num + '张');
                   }
               }
           };
           //一次加载多个文件
           var i = 0, src = _self.files;
           fileReader.readAsDataURL(src[i]);
           fileReader.onloadend = function () {
               i++;
               if (i < src.length) fileReader.readAsDataURL(src[i]);
           }
       }

       function delImg(upInputId, fileId) {
           var _this = $("#" + upInputId);
           var count = parseInt(_this.attr('count'));
           _this.attr('count', count - 1);
           $("." + fileId).remove();
       }

      $(".fabu").on('click',function(){
          var name = $("#name").val();
          var price = $("#price").val();
          var num = $("#num").val();
          var cate1 = $("#cid_1").val();
          var cate2 = $("#cid_2").val();
          var cate3 = $("#cid_3").val();
          if(name==''||price==''||num==""){
                alert("请填写完整内容");
                return;
          }
          // 组合规格名
          var guigeName = document.getElementById('guige').getElementsByClassName("guiname");
          var guigeValue = document.getElementById('guige').getElementsByClassName("guiname");
          var guigeN = [];
          var guigev = [];
          for(var i=0;i<guigeName.length;i++){
                guigeN['spec'+i+"name"] =  guigeName[i].value;
                guigev['spec'+i+"value"] =  guigeValue[i].value;
          }
          var pic = [];
          var imgs = document.getElementById("imgs").getElementsByTagName('img');
          for (var i=0;i<imgs.length;i++){
                pic.push(imgs[i].src);
          }
          $.ajax({
              type:"post",
              url:"/goods/add/",
              dataType:'json',
              data:{
                  name:name,
                  price:price,
                  num:num,
                  cid_1:cate1,
                  cid_2:cate2,
                  cid_3:cate3,
                  pics:pic,
                  content:content,
              }
          })
      })

    </script>
@endsection
